<!-- 从业者-我的-分享赚佣金 -->
<template>
	<view class="balance-page">
		<!-- 零钱金额显示 -->
		<view class="balance-card">
			<!-- 负责人姓名 -->
			<view class="info-item">
				<text class="info-label">累计获得佣金</text>
				<u-input v-model="brokerage.sumBrokerage.toFixed(2)" placeholder="请输入收件人姓名" input-align="left" />
			</view>

			<!-- 职务/岗位 -->
			<view class="info-item">
				<text class="info-label">手机号</text>
				<u-input v-model="brokerage.sumOrder" placeholder="请输入手机号" input-align="left" />
			</view>
		</view>

		<!-- 切换菜单 -->
		<view class="course-tabs">
			<u-tabs :list="tabs" :current="currentTab" @change="changeTab" activeColor="#2979ff" inactiveColor="#606266"
				barWidth="80" item-width="50%" bg-color="#ffffff"></u-tabs>
		</view>
		<!-- 规则说明 -->
		<view class="u-explan" v-if="currentTab == 0">
			<text>规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明规则说明</text>
		</view>
		<!-- 积分明细 -->
		<view class="u-demo-area" v-else>
			<u-toast ref="uToast"></u-toast>
			<u-collapse v-if="key" :item-style="itemStyle" event-type="close" :arrow="arrow" :accordion="accordion"
				@change="change">
				<!-- 		<u-collapse-item :index="index" @change="itemChange" :title="item.head" v-for="(item, index) in itemList"
					:key="index"> -->
				<u-collapse-item :index="index" @change="itemChange" :title="monthKey" v-for="(monthData, monthKey) in itemList"
					:key="monthKey">
					<view>
						<view v-for="(item, index) in monthData" :key="index" class="resume-item">
							<view class="resume-header">
								<text class="user-name">{{ item.body }}</text>
								<text class="position">投递：{{ item.Number }}</text>
							</view>
							<view class="resume-info">
								<text>{{ item.age }}年 | {{ item.education }} | {{ item.experience }}年 | {{ item.certificate }}</text>
							</view>
							<view class="resume-footer">
								<text class="time">投递时间：{{ item.time }}</text>
								<text class="status" :class="{'unviewed': item.status === '未查看', 
					                            'viewed': item.status === '已查看',
					                            'interview': item.status === '已邀面试',
					                            'rejected': item.status === '不合适'}">状态：{{ item.status }}</text>
							</view>
						</view>
					</view>
					<!-- 内容结束 -->
				</u-collapse-item>
			</u-collapse>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				balance: 0.00, // 零钱余额	
				brokerage:{
					sumBrokerage:0.00,
					sumOrder: 0					
				},

				//按时间分类 
				itemList: {
					"2025.4": [{
						head: "2025年4月",
						body: "充值",
						Number: "-25.00",
						time: "4月26日",
						status: "已退款",
						show: false
					}],
					"2025.5": [{
						head: "2025年5月",
						body: "充值",
						Number: "25.00",
						time: "5月20日",
						status: "已支付",
						show: false
					}],
					"2025.6": [{
							head: "2025年4月",
							body: "充值",
							Number: "-25.00",
							time: "4月26日",
							status: "已退款",
							show: false
						},
						{
							head: "2025年5月",
							body: "充值",
							Number: "25.00",
							time: "5月20日",
							status: "已支付",
							show: false
						}
					]
				},
				accordion: true,
				arrow: true,
				hoverClass: 'hover2',
				itemStyle: {},
				key: true,
				// u-tabs
				currentTab: 0,
				tabs: [{
						name: '规则说明'
					},
					{
						name: '推广的用户'
					}
				],
			}
		},
		onShow() {
			// 页面显示时获取零钱余额
			this.getBalance()
		},
		methods: {
			change(e) {
				console.log(e);
			},

			// 提现操作
			handleWithdraw() {
				uni.navigateTo({
					url: '/pages/money/withdraw'
				})
			},
			// 充值操作
			handleRecharge() {
				uni.navigateTo({
					url: '/pages/recharge/index'
				})
			},
			// tabs切换
			changeTab(index) {
				this.currentTab = index;
			},
			// 获取零钱余额（模拟）
			getBalance() {
				// 实际项目中这里应该是调用接口获取数据
				// this.$u.api.getBalance().then(res => {
				//   this.balance = res.data.balance
				// })

				// 模拟数据
				this.balance = 0.00
			},
			handleWithdraw() {
				uni.navigateTo({
					url: '/pages/money/withdraw'
				})
			},
			handleRecharge() {
				uni.navigateTo({
					url: '/pages/recharge/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.balance-page {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding: 10rpx;

		.u-explan {
			text-align: left;
			padding: 30rpx;
			background-color: #ffffff;
		}

		/deep/ .u-demo-area {
			// margin: 5px 20px;
			background-color: #ffffff;

		}

		.example-body {
			flex-direction: column;
			flex: 1;
		}

		.first {
			display: flex;
			justify-content: space-between;
			/* 子项分别靠左右两端对齐 */
		}

		.second {
			display: flex;
			justify-content: space-between;
			/* 子项分别靠左右两端对齐 */
		}

		.text {
			font-size: 14px;
			color: #666;
			line-height: 20px;
			float: right;
		}

		.button {
			// margin-top: 10px;
			margin: 10px;
			margin-bottom: 0;
		}

		.balance-card {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 30px;
			// margin-top: 4rpx;
			text-align: left;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			
			
		.info-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #f5f5f5;
		
			&.clickable:active {
				background-color: #f9f9f9;
			}
		
			.info-label {
				font-size: 28rpx;
				color: #666;
				margin-right: 20px;
				
			}
		
			.info-value {
				font-size: 28rpx;
				color: #333;
			}
		
			&:last-child {
				border-bottom: none;
				// padding: 13px 16px;
			}
		}

		}

		.action-buttons {
			display: flex;
			justify-content: space-between;
			margin-top: 60rpx;

			.action-btn {
				width: 100%;
				height: 90rpx;
				border-radius: 45rpx;
				font-size: 32rpx;

				/deep/ .u-btn--warning.u-btn--plain {
					border-color: #f29100;
					color: #f29100;
				}
			}
		}
		


		.head {
			font-size: 30rpx;
			color: $u-main-color;
			line-height: 1;
			padding: 24rpx 24rpx;
		}

		.body {
			font-size: 28rpx;
			// color: $u-tips-color;
			color: red;
			line-height: 1.4;
			padding: 24rpx;
		}
		
		.course-tabs {
			position: static;
			// margin: 10px;
			left: 0rpx;
			right: 0rpx;
			border-radius: 40rpx 40rpx 0 0;
			background-color: #ffffff;
		}
	}
</style>